<template>
	<view class="deep">
		
			<scroll-view scroll-y="true" :style="{height: scrollHeight}">
				<view class="mt-5" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
				</view>
				<view class="" v-else>
					<view class="rounded-20 m-2 pl-3  bg-white">
						<view class="d-flex j-sb pr-2 py-2 a-center">
							<view class="">
								<view class="">添加</view>
								<view class="">主图</view>
							</view>
							<view class="d-flex a-center flex-1 j-end">
								<view class="mr-2 crop_img" v-if="tempFile_master">
									<image mode="aspectFit" @click="previewImage(tempFile_master[0])" :src="tempFile_master[0]" class="crop_img"></image>
								</view>
								<view class="add_img d-flex a-center j-center" @click="unloadImg">
									<image src="../../static/images/goods/add_img.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="rounded-20 m-2 pl-3  bg-white">
						<view class="d-flex j-sb pr-2 py-2 a-center">
							<view class="">
								<view class="">添加</view>
								<view class="">相册</view>
							</view>
							<view class="d-flex a-center flex-1 j-end">
								<view v-if="tempPath" class="crop_img mr-2" v-for="(item, index) in tempPath" :key="index">
									<image mode="aspectFit" @click="previewImages(tempPath,index)" class="crop_img" :src="item"></image>
								</view>
								<view @click="photo" v-if="tempPath.length<5" class="add_img d-flex a-center j-center">
									<image src="../../static/images/goods/add_img.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="rounded-20 m-2 pl-3  bg-white">
						<view class="d-flex j-sb pr-2 py-2 a-center">
							<view class="">
								<view class="">添加</view>
								<view class="">视频</view>
							</view>
							<view class="d-flex a-center flex-1 j-end">
								<view class="crop_img mr-2" v-if="video_src">
									<video class="crop_img"  id="myVideo" :src="video_src" show-fullscreen-btn='true'></video>
								</view>
								<view class="add_img d-flex a-center j-center" @click="video">
									<image src="../../static/images/goods/add_img.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					
					
					
					<view class="rounded-20 m-2 pl-3  bg-white " >
						<view class="d-flex j-sb pr-2 py-3 a-center clazz" @click="goods_desc">
							<view class="">图文详情</view>
							<view class="d-flex j-center a-center">
								<text class="text-light-muted mr-1">去编辑</text>
								<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
							</view>
						</view>			
					</view>
					<view class="rounded-20 m-2 pl-3  bg-white">
						<view class="d-flex j-sb pr-2 py-3 a-center clazz" @click="goodsPrice">
							<view class="">商品价格</view>
							<view class="d-flex j-center a-center">
								<text class="text-light-muted mr-1">去设置</text>
								<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
							</view>
						</view>
					</view>
					<view class="rounded-20 m-2 pl-3 bg-white clazz" >
						<view class="d-flex j-sb pr-2 py-3 a-center clazz" @click="goodsAss">
							<view class="">关联商品</view>
							<view class="d-flex j-center a-center">
								<text class="text-light-muted mr-1">{{editList.has_linked_goods=='yes'?'已关联':'去关联'}}</text>
								<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
							</view>
						</view>			
					</view>
					
					<!-- 商家服务 -->
					<view class="m-2 bg-white rounded-20 py-2 pl-3">
						<view class="font-md">商品服务</view>
						<view class="py-3 d-flex ">
							<view class="flex-1">
								<u-checkbox-group>
									<u-checkbox v-model="editList.is_return"  shape="circle" icon-size="30"  size="40" active-color="#F24F4A"
									@change="service">包退服务</u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="flex-1">
								<u-checkbox-group>
									<u-checkbox v-model="editList.is_reality"  shape="circle" icon-size="30"  size="40" active-color="#F24F4A"
									@change="product">正品保证</u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="flex-1">
								<u-checkbox-group>
									<u-checkbox  v-model="editList.is_fast" shape="circle" icon-size="30"  size="40" active-color="#F24F4A"
									@change="dispatching">闪送配送</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>
					
					<view class="rounded-20 m-2 pl-3 bg-white" >
						<view class="d-flex j-sb pr-2 py-3 a-center clazz border-bottom">
							<view class="">显示</view>
							<view class="d-flex j-center a-center">
								<u-switch @change="added" v-model="editList.is_on_sale" size="43"></u-switch>
							</view>
						</view>
						<view class="d-flex j-sb pr-2 py-3 a-center clazz border-bottom">
							<view class="">是否包邮</view>
							<view class="d-flex j-center a-center">
								<u-switch @change="shipping" v-model="editList.is_shipping" size="43"></u-switch>
							</view>
						</view>
						<view class="d-flex j-sb pr-2 py-3 a-center clazz ">
							<view class="">普通商品</view>
							<view class="d-flex j-center a-center">
								<u-switch @change="ordinary" v-model="editList.is_alone_sale" size="43"></u-switch>
							</view>
						</view>			
					</view>
					<view class="py-1 text-center font-sm">
						开启则此为商品作为普通商品销售,关闭则此商品只能作为赠品或配件销售
					</view>
				</view>
			</scroll-view>
			
			<!-- 拍照 -->
			<s-popup custom-class="demo-popup" position="bottom" v-model="master_Show">
				<!-- 内容 -->
				<view class="bg-white icon_share">
					<view class="border-bottom d-flex py-3 j-center a-center" @click="photos">
						<view class="text-000">拍照</view>
					</view>
					<view class="d-flex py-3 j-center a-center flex-column" @click="album">
						<view class="text-000">从相册选择</view>
						<view class="font-24 text-999">照片或视频</view>
					</view>
				</view>
				<view class="partition"></view>
				<view class="d-flex j-center a-center py-3 bg-white" @click="cancelShare">
					取消
				</view>
			</s-popup>
			<!-- 拍相册 -->
			<s-popup custom-class="demo-popup" position="bottom" v-model="album_Show">
				<!-- 内容 -->
				<view class="bg-white icon_share">
					<view class="border-bottom d-flex py-3 j-center a-center" @click="album_photos">
						<view class="text-000">拍照</view>
					</view>
					<view class="d-flex py-3 j-center a-center flex-column" @click="album_edit">
						<view class="text-000">从相册选择</view>
						<view class="font-24 text-999">照片或视频</view>
					</view>
				</view>
				<view class="partition"></view>
				<view class="d-flex j-center a-center py-3 bg-white" @click="cancelShare">
					取消
				</view>
			</s-popup>
			<!-- 视频 -->
			<s-popup custom-class="demo-popup" position="bottom" v-model="video_Show">
				<!-- 内容 -->
				<view class="bg-white icon_share">
					<view class="border-bottom d-flex py-3 j-center a-center" @click="video_photos">
						<view class="text-000">拍摄视频</view>
					</view>
					<view class="d-flex py-3 j-center a-center flex-column" @click="video_edit">
						<view class="text-000">从相册选择</view>
						<view class="font-24 text-999">照片或视频</view>
					</view>
				</view>
				<view class="partition"></view>
				<view class="d-flex j-center a-center py-3 bg-white" @click="cancelShare">
					取消
				</view>
			</s-popup>
		<view class="footer"></view> 
		<view class="bg-white release  py-2 w-100 position-fixed bottom-0" >
			<button type="warn" :disabled="isDisable" @click="next_sub">提交</button>
		</view>
		<!-- <image-cropper :src="tempFile_master" @confirm="confirm_master" @cancel="cancel"></image-cropper>
		<image-cropper :src="tempPath" @confirm="confirm"></image-cropper> -->
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
			ImageCropper,
			sPopup
		},
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				editList:'', // 详情数据 
				goods_id:'' ,// 商品id标识,
				service_show:false, // 包退服务
				product_show:false, // 正品保证
				dispatching_show:false, // 闪送配送
				isDisable:false,
				scrollHeight:0, // 屏幕高度
				u_loadmore:true, // 加载中
				
				master_Show:false, // 添加图片模态框
				tempFile_master: '',
				cropFile_master: '',
				
				tempFilePath:[], // 图片列表
				cropFilePath:"", // 裁切图片
				tempPath:"", // 裁切
				album_Show:false, // 添加图片模态框
				
				video_Show:false, // 视频
				video_src:"", // 视频
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
		},
		methods: {
			// 上传主图
			unloadImg(){
				this.master_Show = true;
			},
			// 预览图片
			previewImage(e){
				let photoList = [];
				photoList.push(e);
				uni.previewImage({
					current: 0,
				    urls: photoList // 图片路径必须是一个数组
				});	
			},
			previewImages(e,i){
				// let photoList = [];
				// photoList.push(e);
				// console.log(photoList)
				uni.previewImage({
					current: i,
				    urls: e // 图片路径必须是一个数组
				});
			},
			// 取消
			cancelShare(){
				this.master_Show = false;
				this.album_Show = false;
			},
			// 拍照
			photos(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original"],
					sourceType: ['camera'], //从相册选择
				    success:(res)=>{
						console.log(res,"拍照")
						this.tempFile_master=res.tempFilePaths
						this.uploadFile_master(res.tempFilePaths)
					}
				});
				that.master_Show=false;
			},
			// 我的相册
			album(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original"],
					sourceType: ['album'], //从相册选择
				    success:(res)=>{
						console.log(res,"我的相册")
						uni.showToast({
							title: "上传中...",
							icon: "loading",
							mask: true,
							duration: 5000,
			            });
						this.tempFile_master=res.tempFilePaths
						this.uploadFile_master(res.tempFilePaths)
					}
				});
				that.master_Show=false;
			},
			uploadFile_master(filePath){
				console.log(filePath)
				uni.uploadFile({
					url:`${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
					filePath:filePath[0],
					name:"tempimage",
					formData:{
						'token':uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res)
						let fileData=JSON.parse(res.data)
						this.$H.post('v2/store/goods/image/update',{
							goods_id:this.goods_id,
							goods_image:fileData.data
						}).then(res=>{
							if(res.data){
								this.$u.toast('添加成功')
							}else{
								this.$u.toast(res.status.error_desc)
							}
						})
					}
				})
			},
			
			// 裁剪图片
			// confirm_master(e) {
			//     this.tempFile_master = ''
			//     this.cropFile_master = e.detail.tempFilePath
			// 	   this.uploadFile_master(this.cropFile_master)
			// },
			
			// 相册
			photo(){
				this.album_Show = true;
			},
			// 拍照
			album_photos(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original"],
					sourceType: ['camera'], //从相册选择
				    success:(res)=>{
						console.log(res,"拍照")
						this.tempPath=[...this.tempPath,...res.tempFilePaths]
						this.uploadFile(res.tempFilePaths[0])
					}
				});
				this.album_Show = false;
			},
			// 从相册选择
			album_edit(){
				var that=this
				if(that.tempFilePath.length>=5){
					let arr='最多添加5张商品图片'
					this.showToast(arr) 
				}else{
					uni.chooseImage({
					    count:5,
					    sizeType:["original","compressed"],
						sourceType: ['album'], //从相册选择
					    success:(res)=>{
							uni.showToast({
					                title: "上传中...",
					                icon: "loading",
					                mask: true,
					                duration: 5000,
					        });
							this.tempPath=[...this.tempPath,...res.tempFilePaths]
							this.tempPath.forEach(v=>{
								this.uploadFile(v)
							})
						}
					});
					this.album_Show = false;
				}
			},
			uploadFile(filePath){
				uni.uploadFile({
					url:`${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
					filePath:filePath,
					name:"tempimage",
					formData:{
						'token':uni.getStorageSync("token")
					},
					success: (res) => {
						let fileData=JSON.parse(res.data)
						this.dictionaries=fileData.data	
						this.$H.post("admin/goods/gallery/add",{
							goods_id:this.goods_id,
							image:this.dictionaries,
						}).then(res=>{
							this.$u.toast('上传成功')
						})
					}
				})
			},
			// 裁剪图片
			// confirm(e) {
			//     this.cropFilePath = e.detail.tempFilePath
			// 	this.tempFilePath.push(e.detail.tempFilePath)
			// },
			
			video(){
				this.video_Show = true;
			},
			
			// 拍摄视频
			video_photos(){
				uni.chooseVideo({
				    count: 1,
				    sourceType: ['camera'],
				    success: (res)=>{
						let tempFilePath= res.tempFilePath;
						uni.showLoading({
							title:"上传中",
							success: (ress) => {
								this.video_Show = false;
								uni.uploadFile({
									url:`${this.localConfig.web_Url}v2/store/medialibrary/file/temp/upload`,
									filePath:res.tempFilePath,
									name:"tempfile",
									formData:{
										'token':uni.getStorageSync("token"),
									},
									success: (res) => {
										let fileData=JSON.parse(res.data)
										this.$H.post("v2/store/goods/video/update",{
											goods_id:this.goods_id,
											goods_video:fileData.data
										}).then(res=>{
											if(res.status.succeed==0){
												this.$refs.uToast.show({
													title: '上传文件大小不符！',
													type: 'default',
												})
												uni.hideLoading()
											}else{
												uni.showLoading({
													title:"正在上传",
													success: () => {
														this.video_src = tempFilePath
														uni.hideLoading()
													}
												})
											}
										})
									}
								})
							}
						})
				    }          
				});
			},
			toJSON(){
				return this
			},
			// 商品视频
			video_edit(){
				uni.chooseVideo({
				    count: 1,
				    sourceType: ['album'],
				    success: (res)=>{
						let tempFilePath= res.tempFilePath;
						uni.showLoading({
							title:"上传中",
							success: (ress) => {
								this.video_Show = false;
								uni.uploadFile({
									url:`${this.localConfig.web_Url}v2/store/medialibrary/file/temp/upload`,
									filePath:res.tempFilePath,
									name:"tempfile",
									formData:{
										'token':uni.getStorageSync("token"),
									},
									success: (res) => {
										let fileData=JSON.parse(res.data)
										this.$H.post("v2/store/goods/video/update",{
											goods_id:this.goods_id,
											goods_video:fileData.data
										}).then(res=>{
											if(res.status.succeed==0){
												this.$refs.uToast.show({
													title: '上传文件大小不符！',
													type: 'default',
												})
												uni.hideLoading()
											}else{
												uni.showLoading({
													title:"正在上传",
													success: () => {
														this.video_src = tempFilePath
														uni.hideLoading()
													}
												})
											}
										})
									}
								})
							}
						})
				    }          
				});	
			},
			// 商品价格
			goodsPrice(){
				uni.navigateTo({
					url:'/pages/goods-edit-expert/goods-edit-expert?goods_id='+this.goods_id
				})
			},
			// 关联商品
			goodsAss(){
				uni.setStorageSync("goods_id",JSON.stringify(this.goods_id))
				uni.navigateTo({
					url:`/pages/goods-edit-ass/goods-edit-ass?goods_id=${this.goods_id}&goods_name=添加&next_name=下一步`
				})	
			},
			// 图文描述
			goods_desc(){
				uni.navigateTo({
					url:'/pages/goods-edit-desc/goods-edit-desc?goods_id='+this.goods_id
				})
			},
			
			// 包退服务
			service(e){
				this.$H.post("admin/merchant/goods/goodsservice/update",{goods_id:this.goods_id,type:'return',is_support:!this.editList.is_return}).then(res=>{
					console.log(res,this.editList.is_return)
				})
			},
			// 正品保证
			product(e){
				this.$H.post("admin/merchant/goods/goodsservice/update",{goods_id:this.goods_id,type:'real_guarantee',is_support:!this.editList.is_reality}).then(res=>{
					console.log(res,this.editList.is_reality)
				})
			},
			// 闪送配送
			dispatching(e){
				this.$H.post("admin/merchant/goods/goodsservice/update",{goods_id:this.goods_id,type:'fast_delivery',is_support:!this.editList.is_fast}).then(res=>{
					console.log(res,this.editList.is_fast)
				})
			},
			// 上下架商品
			added(){
				if(this.editList.is_on_sale){
					this.$H.post("admin/goods/toggle/sale",{id:this.goods_id,type:"online"}).then(res=>{
						console.log(res,this.editList.is_on_sale)
					})
				}else{
					this.$H.post("admin/goods/toggle/sale",{id:this.goods_id,type:"offline"}).then(res=>{
						console.log(res,this.editList.is_on_sale)
					})
				}
			},
			// 是否包邮
			shipping(){
				if(this.editList.is_shipping){
					this.$H.post("admin/goods/toggle/free_shipping",{id:this.goods_id,is_free:1}).then(res=>{
					})
				}else{
					this.$H.post("admin/goods/toggle/free_shipping",{id:this.goods_id,is_free:0}).then(res=>{
					})
				}
			},
			// 普通商品
			ordinary(){
				if(this.editList.is_alone_sale){
					this.$H.post("admin/goods/toggle/gifts",{id:this.goods_id,is_gift:0}).then(res=>{
						console.log(res)
					})
				}else{
					this.$H.post("admin/goods/toggle/gifts",{id:this.goods_id,is_gift:1}).then(res=>{
						console.log(res)
					})
				}
			},
			// 发布成功
			next_sub(){
				uni.redirectTo({
					url:"/pages/goods-release/goods-release?goods_id="+this.goods_id
				})
				this.isDisable=true   //点击一次时隔两秒后才能再次点击
				getApp().globalData.next_detail=null
			}
		},
		onLoad(e) {
			let arrname="发布成功"
			var globalData = getApp().globalData.release; //获取全局变量
			getApp().globalData.release= arrname; //修改全局变量
			this.goods_id=e.goods_id
			this.$H.post("admin/merchant/goods/detail",{goods_id:e.goods_id}).then(res=>{
				console.log(res)
				this.editList=res.data
				this.brand_item=this.editList.brand_name
				this.u_loadmore=false 
			})
		},
		onUnload() {
			var globalData = getApp().globalData.brand_item; //获取全局变量
			getApp().globalData.brand_item= null; //修改全局变量
		},
		onShow() {
			this.$H.post("admin/merchant/goods/detail",{goods_id:this.goods_id}).then(res=>{
				this.editList=res.data
			})
			
			if(getApp().globalData.brand_item){
				let globalData=getApp().globalData.brand_item
				this.brand_item=globalData.brand_name
				console.log(this.brand_item)
			}
		},
	}
</script>

<style>
	.store{
		color: #F84B4F;
		padding: 10upx 20upx;
		background: linear-gradient(to right,#FEDFE4,#FFE7E3);
		border-radius: 50upx;
	}
	.deep /deep/ .u-switch{
		font-size: 40upx;
		border: #0000FF;
	}
	.deep /deep/ .u-switch__node{
		background-color: #000000;
		width: 40upx;
		height: 40upx;
	}
	
	.add_img{
		width: 90upx;
		height: 90upx;
		border: 1px dashed #d6d6d6;
	}
	.add_img image{
		width: 50upx;
		height: 50upx;
	}
	
	.s-popup-mask{
		/* background: rgba(204,204,204,0.3)!important; */
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: #4c4c4c;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	.partition{
		background-color: #ebebeb;
		height: 15upx;
	}
	.crop_img{
		width: 90upx;
		height: 90upx;
	}
</style>
